<template>
  <div class="data-container">
    <div class="title">
      <div class="text">会员地区分布</div>
      <i class="icon el-icon-tickets" @click="handleDetail({})"></i>
    </div>
    <div class="line">
      <div class="filter-box">
        <div class="item">
          <div class="label">会员等级:</div>
          <el-select clearable v-model="membership_level_code" placeholder="请选择" @change="handleChangeLevel">
            <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="label">分类:</div>
          <el-select clearable v-model="cls" placeholder="请选择" @change="handleChange">
            <el-option v-for="item in clsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
      </div>
      <div class="text-right" @click="handleSwitch">
        <span v-if="active === 'map'"><i class="icon el-icon-set-up"></i>切换为图表</span>
        <span v-else><i class="icon el-icon-set-up"></i>切换为地图</span>
      </div>
    </div>
    <div id="echarts14" v-show="active === 'map'"></div>
    <div class="table-container" v-show="active === 'table'">
      <div class="tr header">
        <div class="th">排名</div>
        <div class="th">省份</div>
        <div class="th">共计</div>
        <div class="th">财富通至尊</div>
        <div class="th">金钻VIP</div>
        <div class="th">银钻VIP</div>
        <div class="th">钻石VIP</div>
      </div>
      <div class="table">
        <div class="tr" v-for="(item, index) in dataList" :key="item.name" @click="handleDetail({ address: item.name })">
          <div class="td">{{ index }}</div>
          <div class="td">{{ item.name }}</div>
          <div class="td">{{ item.total }}</div>
          <div class="td" @click.stop="handleDetail({ address: item.name, level: '财富通至尊' })">{{ item.value1 }}</div>
          <div class="td" @click.stop="handleDetail({ address: item.name, level: '金钻VIP' })">{{ item.value2 }}</div>
          <div class="td" @click.stop="handleDetail({ address: item.name, level: '银钻VIP' })">{{ item.value3 }}</div>
          <div class="td" @click.stop="handleDetail({ address: item.name, level: '钻石VIP' })">{{ item.value4 }}</div>
        </div>
      </div>
    </div>
    <dv-decoration-3 class="decoration" />
  </div>
</template>
<script>
import echarts from 'echarts'
import { apiMemberMap, apiMemberClassRank } from '@/api/industryData/index'
import '@/utils/china.js'

export default {
  name: 'panel4',
  data() {
    return {
      active: 'map',
      myEcharts: '',
      dataList: [],
      clsOptions: [],
      levelOptions: [
        { value: '钻石VIP', label: '钻石VIP' },
        { value: '银钻VIP', label: '银钻VIP' },
        { value: '金钻VIP', label: '金钻VIP' },
        { value: '财富通至尊', label: '财富通至尊' },
      ],
      membership_level_code: '',
      cls: '',
      selected: {
        财富通至尊: true,
        金钻VIP: true,
        银钻VIP: true,
        钻石VIP: true,
      },
    }
  },
  mounted() {
    this.comBaseApi()
    this.getData()
  },
  methods: {
    handleSwitch() {
      if (this.active === 'map') {
        this.active = 'table'
      } else {
        this.active = 'map'
      }
    },
    // 获取分类下拉
    comBaseApi() {
      apiMemberClassRank().then((res) => {
        this.clsOptions = []
        for (let key in res.data) {
          this.clsOptions.push({
            value: key,
            label: key,
          })
        }
      })
    },
    // 获取数据
    getData() {
      const info = {
        cls: this.cls,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiMemberMap(formData).then((res) => {
        const { data } = res
        this.dataList = data
        this.initEcharts()
      })
    },
    // 筛选项变化
    handleChange() {
      this.getData()
    },
    // 筛选等级
    handleChangeLevel() {
      if (this.membership_level_code) {
        for (let key in this.selected) {
          this.selected[key] = false
        }
        this.selected[this.membership_level_code] = true
      } else {
        for (let key in this.selected) {
          this.selected[key] = true
        }
      }
      this.initEcharts()
    },
    randomData() {
      return Math.round(Math.random() * 500)
    },
    // 初始化图表
    initEcharts() {
      // const mapDataList = [
      //   { name: '财富通至尊', data: [], dataName: 'value1' },
      //   { name: '金钻VIP', data: [], dataName: 'value2' },
      //   { name: '银钻VIP', data: [], dataName: 'value3' },
      //   { name: '钻石VIP', data: [], dataName: 'value4' },
      // ]
      // let series = []
      // mapDataList.forEach((item) => {
      //   item.data = this.dataList.map((item1) => {
      //     return {
      //       name: this.formatName(item1.name),
      //       value: item1[item.dataName],
      //     }
      //   })
      //   series.push({
      //     name: item.name,
      //     zoom: 1.2, // 设置比例比sesies的大，出现外围地图叠加效果
      //     type: 'map',
      //     mapType: 'china',
      //     label: {
      //       show: true,
      //       color: '#fff',
      //     },
      //     itemStyle: {
      //       // 图形样式
      //       areaColor: '#274d68',
      //       borderWidth: 1,
      //       borderColor: '#68cee0',
      //       shadowColor: 'rgba(255, 255, 255, 0.5)',
      //       shadowBlur: 10,
      //     },
      //     emphasis: {
      //       // 高亮状态下的多边形和标签样式
      //       label: {
      //         show: true,
      //         color: '#fff',
      //       },
      //       itemStyle: {
      //         areaColor: 'rgba(255, 255, 255, 0.4)',
      //         borderWidth: 2,
      //         borderColor: '#ffffff',
      //       },
      //     },
      //     data: item.data,
      //   })
      // })
      this.dataList.forEach((item) => {
        item.name = this.formatName(item.name)
        item.value = item.total
      })
      console.log(this.dataList, 66)
      const series = {
        name: '',
        zoom: 1.2, // 设置比例比sesies的大，出现外围地图叠加效果
        type: 'map',
        mapType: 'china',
        label: {
          show: true,
          color: '#fff',
        },
        itemStyle: {
          // 图形样式
          areaColor: '#274d68',
          borderWidth: 1,
          borderColor: '#68cee0',
          shadowColor: 'rgba(255, 255, 255, 0.5)',
          shadowBlur: 10,
        },
        emphasis: {
          // 高亮状态下的多边形和标签样式
          label: {
            show: true,
            color: '#fff',
          },
          itemStyle: {
            areaColor: 'rgba(255, 255, 255, 0.4)',
            borderWidth: 2,
            borderColor: '#ffffff',
          },
        },
        data: this.dataList,
      }
      var max = this.dataList[0].total

      this.myEcharts = echarts.init(document.getElementById('echarts14'))
      var option = {
        legend: {
          top: '10%',
          textStyle: {
            color: '#ffffff',
          },
          selected: this.selected,
        },
        color: ['#68cee0', '#eedd78'],
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function (params) {
            // 显示模板
            if (params['data']) {
              return [params.name, '财富通至尊：' + params['data'].value1, '金钻VIP：' + params['data'].value2, '银钻VIP：' + params['data'].value3, '钻石VIP：' + params['data'].value4, '共计：' + params.value].join('<br>')
            } else {
              return params.name
            }
          },
        },
        geo: {
          map: 'china',
          zoom: 1.22, // 设置比例比sesies的大，出现外围地图叠加效果
          emphasis: {
            // 高亮状态下的多边形和标签样式
            disabled: true,
          },
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: '#009cc9',
                  },
                },
              },
            },
          ],
          itemStyle: {
            // 图形样式
            areaColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 2,
            borderColor: '#68cee0',
          },
        },
        visualMap: {
          min: 0,
          max,
          inRange: {
            color: ['rgba(0, 0, 0, 0)', '#274d68'], //控制颜色渐变的范围
          },
          calculable: true, //出现滑块
          bottom: '5%',
          textStyle: {
            color: '#ffffff',
          },
        },
        series,
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.clear() // 清空画布
      const that = this
      setTimeout(() => {
        this.myEcharts.setOption(option)
        this.myEcharts.on('click', function (params) {
          that.handleDetail({ address: that.formatName(params.name, 'reFormatName') })
        })
      }, 100)
    },
    // 计算地图的最大值
    handleMax(list) {
      let max = 0,
        temp = 0,
        count = 0
      max = temp = list.sort((a, b) => {
        return b.value - a.value
      })[10].value

      do {
        temp = temp / 10
        count++
      } while (temp > 1)
      return parseInt(max / Math.pow(10, count - 1)) * Math.pow(10, count - 1)
    },
    onResize() {
      if (this.myEcharts) {
        this.myEcharts.resize()
      }
    },
    // 省的名字对不上
    formatName(name, type) {
      const list = [
        { name: '河北省', formatName: '河北' },
        { name: '江苏省', formatName: '江苏' },
        { name: '山东省', formatName: '山东' },
        { name: '浙江省', formatName: '浙江' },
        { name: '安徽省', formatName: '安徽' },
        { name: '广东省', formatName: '广东' },
        { name: '黑龙江省', formatName: '黑龙江' },
        { name: '吉林省', formatName: '吉林' },
        { name: '辽宁省', formatName: '辽宁' },
        { name: '四川省', formatName: '四川' },
        { name: '河南省', formatName: '河南' },
        { name: '重庆市', formatName: '重庆' },
        { name: '上海市', formatName: '上海' },
        { name: '陕西省', formatName: '陕西' },
        { name: '北京市', formatName: '北京' },
        { name: '新疆维吾尔自治区', formatName: '新疆' },
        { name: '福建省', formatName: '福建' },
        { name: '湖北省', formatName: '湖北' },
        { name: '云南省', formatName: '云南' },
        { name: '天津市', formatName: '天津' },
        { name: '湖南省', formatName: '湖南' },
        { name: '甘肃省', formatName: '甘肃' },
        { name: '广西壮族自治区', formatName: '广西' },
        { name: '内蒙古自治区', formatName: '内蒙古' },
        { name: '宁夏回族自治区', formatName: '宁夏' },
        { name: '贵州省', formatName: '贵州' },
        { name: '海南省', formatName: '海南' },
        { name: '江西省', formatName: '江西' },
        { name: '青海省', formatName: '青海' },
        { name: '西藏', formatName: '西藏' },
        { name: '山西省', formatName: '山西' },
      ]
      if (type === 'reFormatName') {
        // 格式化数据还原
        const item = list.find((item) => item.formatName === name)
        if (item) {
          return item.name
        } else {
          return name
        }
      } else {
        const item = list.find((item) => item.name === name)

        if (item) {
          return item.formatName
        } else {
          return name
        }
      }
    },
    handleDetail(query) {
      query.source = 'hss'
      this.$router.push({
        name: 'CurrentMember',
        query,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);

.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  .icon {
    cursor: pointer;
  }
}

.data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
.filter-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #ffffff;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    .label {
      margin-right: 10px;
    }
  }
}

#echarts14 {
  width: 100%;
  height: 100%;
}

::v-deep .el-select .el-input__inner {
  background: $mainColorOpcity;
  width: 200px;
  margin-right: 4px;
  color: #ffffff;
  height: 30px;
}
::v-deep .el-input__icon {
  line-height: 30px !important;
}

.decoration {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 250px;
  height: 30px;
}
.line {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text-right {
    cursor: pointer;
    .icon {
      margin-right: 5px;
    }
  }
}
.table-container {
  width: 100%;
  height: calc(100% - 100px);
  margin-top: 20px;
  position: relative;
  padding-top: 30px;

  .th {
    color: $mainColor;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    &:nth-child(1) {
      width: 10%;
    }
    &:nth-child(2) {
      width: 20%;
    }
    &:nth-child(3) {
      width: 10%;
    }
    &:nth-child(4) {
      width: 15%;
    }
    &:nth-child(5) {
      width: 15%;
    }
    &:nth-child(6) {
      width: 15%;
    }
    &:nth-child(7) {
      width: 15%;
    }
  }
  .tr {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    &.header {
      position: absolute;
      left: 0;
      top: 0;
    }
    .td {
      color: #ffffff;
      height: 30px;
      text-align: center;
      &:nth-child(1) {
        width: 10%;
      }
      &:nth-child(2) {
        width: 20%;
      }
      &:nth-child(3) {
        width: 10%;
      }
      &:nth-child(4) {
        width: 15%;
      }
      &:nth-child(5) {
        width: 15%;
      }
      &:nth-child(6) {
        width: 15%;
      }
      &:nth-child(7) {
        width: 15%;
      }
    }
  }
}
.table {
  width: 100%;
  height: calc(100% - 30px);

  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>
